<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device,initial-scale=1">
    <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="reset.css" rel="stylesheet">
    <link href="icon.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="../index.js"></script>
    <title>饿了么 首页</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .business li {
            display: flex;
            margin: auto 2.6vw;
        }
    </style>
</head>
<body>
<!--- 总容器 --->
<div class ="wrapper">
    <!--- header部分 -->
    <header>
        <div class="icon-location-box">
            <div class="icon-location"></div>
        </div>
        <div class="location-text">云南大学呈贡校区<i class="fa fa-caret-down"></i> </div>
    </header>
    <!-- search部分 -->
    <div class ="search" >
        <div class="search-fixed-top" id="fixedBox">
            <div class ="search-box">
                <input id="search" style="outline:none;font-size:3.4vw;width: 100%;height:100%;line-height: 9vh; font-size: 3.4vw; text-align: center;" type="text" placeholder="搜索饿了么商家">
            </div>
        </div>
    </div>

<!--点餐分类部分-->
<ul class="foodtype">
    <li onclick="location.href='businessList.html?shopType=美食'">
      <img src="img/dcfl01.png" alt="">
        <p>美食</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=早餐'">
        <img src="img/dcfl02.png"  alt="">
        <p>早餐</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=跑腿代购'">
        <img src="img/dcfl03.png" alt="">
        <p>跑腿代购</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=汉堡披萨'">
        <img src="img/dcfl04.png" alt="">
        <p>汉堡披萨</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=甜品饮品'">
        <img src="img/dcfl05.png" alt="">
        <p>甜品饮品</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=速食简餐'">
        <img src="img/dcfl06.png" alt="">
        <p>速食简餐</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=地方小吃'">
        <img src="img/dcfl07.png" alt="">
        <p>地方小吃</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=米粉面馆'">
        <img src="img/dcfl08.png" alt="">
        <p>米粉面馆</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=包子粥铺'">
        <img src="img/dcfl09.png" alt="">
        <p>包子粥铺</p>
    </li>
    <li onclick="location.href='businessList.html?shopType=炸鸡炸串'">
        <img src="img/dcfl10.png" alt="">
        <p>炸鸡炸串</p>
    </li>
</ul>

<!--横幅广告部分-->
<div class ="banner">
    <h3>品质套餐</h3>
    <p>搭配齐全吃得好</p>
    <a>立即抢购 &gt;</a>
</div>

<!--超级会员部分-->
<div class="supermember">
    <div class="left">
        <img src="img/super_member.png" alt="">
        <h3>超级会员</h3>
        <p>&#8226; 每月享超值权益</p>
    </div>
    <div class ="right">
        立即开通 &gt;
    </div>
</div>
<!--推荐商家部分-->
<div class="recommend">
    <div class="recommend-line"></div>
    <p>推荐商家</p>
    <div class="recommend-line"></div>
</div>
<!--推荐方式部分-->
<ul class="recommendtype">
    <li>综合排序<i class="fa fa-caret-down"></i> </li>
    <li>距离最近</li>
    <li>销量最高</li>
    <li>筛选<i class="fa fa-filter"></i></li>
</ul>
<!--商家列表部分-->
<ul class="business">
    <script>
        function goDetail(shopId) {
            window.location.href = 'businessInfo.html?id=' + shopId;
        }

        function listBusiness(search) {
            $.ajax({
                url: 'http://127.0.0.1:8081/shop/getAll?searchName=' + (search != null ? search : ''), // 替换为实际的注册 API URL
                type: 'GET',
                contentType: 'application/json; charset=UTF-8', // 设置内容类型为 JSON
                data: {},
                success: function (res) {
                    if (res.flag) {
                        console.log(res)
                        var html = [];
                        for (var i = 0; i < res.data.length; i++) {
                            html.push('<li onclick=goDetail('+res.data[i].shopId+')>')
                            html.push('	<img src="'+res.data[i].shopImg+'" alt="">')
                            html.push('	<div class="business-info">')
                            html.push('		<div class="business-info-h">')
                            html.push('			<h3>'+res.data[i].shopName+'</h3>')
                            html.push('			<div class="business-info-like">&#8226;</div>')
                            html.push('		</div>')
                            html.push('		<div class="business-info-star">')
                            html.push('			<div class="business-info-star-left">')
                            html.push('				<i class="fa fa-star"></i>')
                            html.push('				<i class="fa fa-star"></i>')
                            html.push('				<i class="fa fa-star"></i>')
                            html.push('				<i class="fa fa-star"></i>')
                            html.push('				<i class="fa fa-star"></i>')
                            html.push('				<p>4.9 月售345单</p>')
                            html.push('			</div>')
                            html.push('			<div class="business-info-star-right">')
                            html.push('				蜂鸟专送')
                            html.push('			</div>')
                            html.push('		</div>')
                            html.push('		<div class="business-info-delivery">')
                            html.push('			<p>&#165;'+res.data[i].startPrice+'起送 | &#165;'+res.data[i].deliveryPrice+'配送</p>')
                            html.push('			<p>3.22km | 30分钟</p>')
                            html.push('		</div>')
                            html.push('		<div class="business-info-explain">')
                            html.push('			<div>'+res.data[i].shopExplain+'</div>')
                            html.push('		</div>')
                            html.push('	</div>')
                            html.push('</li>');
                        }
                        $('.business').html(html.join(''));
                    } else {
                        alert(res.message)
                    }
                },
                error: function (xhr, status, error) {
                    alert('查询失败：' + xhr.statusText);
                }
            });
        }
        
        $(document).ready(function () {
            listBusiness();

            $('#search').keypress(function(event) {
                if (event.which == 13) {
                    listBusiness($("#search").val().trim());
                    $("#search").blur();
                }
            });
        });
    </script>
</ul>
<div style="height: 3vw;"></div>
<!--底部菜单部分-->
<ul class="footer">
    <li onclick="location.href='index.html' ">
        <i class="fa fa-home"></i>
        <p>首页</p>
    </li>
    <li onclick="location.href='Message.html'">
        <i class="fa fa-compass"></i>
        <p>消息</p>
    </li>
    <li onclick="location.href='orderList.html' ">
        <i class="fa fa-file-text-o"></i>
        <p>订单</p>
    </li>
    <li onclick="location.href='Person.html' ">
        <i class="fa fa-user-o"></i>
        <p>我的</p>
    </li>
</ul>
</div>
</body>
</html>